<template>
  <div>
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="explain">规则说明<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="margin-top: 20px" row-key="name">
      <el-table-column label="序号" type="index" width="80" align="center"/>
<!--      <el-table-column prop="cateName" label="积分分类" align="center"/>-->
      <el-table-column prop="ruleName" label="规则名称" align="center"/>
      <el-table-column
        align="center"
        width="200"
        label="上限值">
        <template slot-scope="scope">
          <!--          <el-input-->
          <!--            v-focus-->
          <!--            :ref="scope.row.id"-->
          <!--            @change="editSortChange(scope.row)"-->
          <!--            v-if="scope.row.sortEdit == true"-->
          <!--            v-model="scope.row.maxCount"-->
          <!--            @blur="saveSort(scope.row)"-->
          <!--            @keyup.enter.native="editSortBlur(scope.row.maxCount)"-->
          <!--          ></el-input>-->
          <div>
            <div  v-if="scope.row.isEnable == 0">
              <span>未开启</span>
            </div>

            <div  v-if="scope.row.isEnable == 1">
              <span v-if="scope.row.maxCount == -1">无上限</span>
              <span v-else>{{scope.row.maxCount}}</span>
            </div>
            <!--            <span v-if="scope.row.isEnable == 1" @click="editSort(scope.row)">-->
            <!--              <i class="el-icon-edit" style="color: #409EFF"></i>-->
            <!--            </span>-->
          </div>
        </template>
        <!--        <template slot-scope="scope">-->
        <!--          <span v-if="scope.row.maxCount == null">&#45;&#45;</span>-->
        <!--          <span v-else>{{scope.row.maxCount}}</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column label="是否开启" align="center">
        <template slot-scope="scope">
          <el-switch
            @change="decision(scope.$index)"
            v-model="scope.row.isEnable"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <span class="btn" v-if="scope.row.isEnable == 1" @click="upper(scope.row.id)">设置上限</span>
          <span class="btn" v-if="scope.row.isEnable == 1" @click="son(scope.row.id, scope.row.maxCount)">查看规则</span>
          <span v-else>注:开启规则进行设置。</span>
        </template>
      </el-table-column>
    </el-table>
    <integral-upper ref="integralUpper" @refresh="getList()"/>
    <sub-rule ref="subRule" @refresh="getList()"/>
    <ex-plain ref="exPlain"></ex-plain>
  </div>
</template>

<script>
  import IntegralUpper from './integralupper'
  import SubRule from './subrule'
  import ExPlain from './explain'

  export default {
    name: 'integral',
    data() {
      return {
        tabPosition: 'left',
        cateList: [],
        activeNames: null,
        once: '-1',
        parentclass: [],
        tableData: [],
        grade: '',
        count: 1,
        value: true,
        ruleTopId: '',
        editIdx: null
      }
    },
    mounted() {
      this.getList()
    },
    directives: {
      // 注册一个局部的自定义指令 v-focus
      focus: {
        // 指令的定义
        inserted: function (el) {
          // 聚焦元素
          el.querySelector('input').focus()
        }
      }
    },
    components: {IntegralUpper, SubRule, ExPlain},
    methods: {
      editSort(user) {
        this.$set(user, 'sortEdit', true)
        this.$nextTick(() => {
          this.$refs[user.id].focus()
        })
      },
      editSortChange(user) {
        this.$set(user, 'sortEditChanged', true)
      },
      async saveSort(user) {
        if (!user.sortEditChanged) {
          this.$set(user, 'sortEdit', false)
          this.$set(user, 'sortEditChanged', false)
          return
        }

        let res = await this.$http.post(
          '/integral-admin/integral/role/updateMaxCount', {
            markId: user.id,
            maxCount: user.maxCount
          })
        if (res && res.code === 200) {
          this.$set(user, 'sortEdit', false)
          this.$set(user, 'sortEditChanged', false)
          this.$notify.success({title: '成功', message: '修改上限值成功！'})
          this.getList()
        } else {
          this.$notify.error({title: '错误', message: '修改上限值失败！'})
        }
      },
      editSortBlur(user) {
        this.$refs[user.id].blur()
      },
      change(e, row) {
        row.once = e.target.value
        this.$forceUpdate()
      },
      getList() {
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/rule/parent/list'),
          method: 'post'
        }).then(res => {
          this.tableData = res.data
        })
      },
      upper(id) {
        this.$nextTick(() => {
          this.$refs.integralUpper.init(id)
        })
      },
      explain() {
        this.$nextTick(() => {
          this.$refs.exPlain.init()
        })
      },
      son(id, maxCount) {
        this.$nextTick(() => {
          this.$refs.subRule.init(id, maxCount)
        })
      },
      cate(item) {
        this.$http({
          url: this.$http.adornUrl('/sys/integral/getParentList'),
          method: 'post',
          data: {
            cateId: item.id
          }
        }).then(res => {
          this.parentclass = res.data
        })
      },
      decision(index) {
        let row = this.tableData[index]
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/rule/enableParentRule'),
          method: 'post',
          data: {
            isEnable: row.isEnable ? 1 : 0,
            markId: row.id
          }
        }).then(res => {
          if (res.code === 200) {
            this.getList()
          }
          // let ruleTopId = res.data
          // eslint-disable-next-line eqeqeq
          // this.tableData[index].ruleTopId = ruleTopId
        })
      }
    }
  }
</script>

<style scoped>
  /* .left { */
    /*border: 1px solid #000000;*/
  /* } */

  .header-left {
    text-align: center;
    height: 60px;
    font-size: 24px;
    line-height: 60px;
    background: #CCCCCC;
  }

  .btn {
    color: #409EFF;
    cursor: pointer;
  }

  .header-left-bottom {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #FAFAFA;
  }

  .auto-title {
    margin: 0;
    flex: 1;
    display: flex;
    justify-content: space-between;
  }

  .header-left-name {
    border-left: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
  }

  .right {
    padding: 0;
    margin-left: 40px;
    /*border: 1px solid #000000;*/
  }
</style>
